// import { TrademarkCircleFilled } from '@ant-design/icons';
import React, { Component } from 'react';

import Img_3 from '../../images/1.svg'
import Img_2 from '../../images/1.jpg'
import './de_address.css'

export default class De_address extends Component {

    goHomeM = () => {
        this.props.history.push('/homepage')
    }
    goLoginM = () => {
        this.props.history.push('/login')
    }
    goPayM = () => {
        this.props.history.push('/pay')
    }

    render() {
        return (
            <div>
                <div className="data-content">
                    <div className="wrap">
                        <div className="main-item-left">
                            <header className="main_header">
                                <div onClick={this.goHomeM.bind(this)}>
                                    <span className="logo_text">
                                        <font style={{ verticalAlign: 'inherit' }}>
                                            <font style={{ verticalAlign: 'inherit' }}>我们的生活市场</font>
                                        </font>
                                    </span>
                                </div>
                                <nav>
                                    <ul className="breadcrumb">
                                        <li className="breadcrumb_item breadcrumb_completed">
                                            <span className="breadcrumb_text">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>信息</font>
                                                </font>
                                            </span>
                                            <span className="icon-svg">→</span>
                                        </li>
                                        <li className="breadcrumb_item breadcrumb_completed">
                                            <span className="breadcrumb_text">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>运输</font>
                                                </font>
                                            </span>
                                            <span className="icon-svg">→</span>
                                        </li>
                                        <li className="breadcrumb_item breadcrumb_completed">
                                            <span className="breadcrumb_text">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>付款</font>
                                                </font>
                                            </span>
                                        </li>
                                    </ul>
                                </nav>
                                <div className="shown-if-js">
                                    <div className="dynamic-checkout">
                                        <h2 className="dynamic-checkout_title">
                                            <font style={{ verticalAlign: 'inherit' }}>
                                                <font style={{ verticalAlign: 'inherit' }}>快速结帐</font>
                                            </font>
                                        </h2>
                                        <div className="shopify-clean">
                                            <img src={Img_3} className="img_3" alt="" />
                                        </div>
                                    </div>
                                    <div className="alternative-payment-separator" >
                                        <span className="alternative-payment-separator_content">
                                            <font style={{ verticalAlign: 'inherit' }}>
                                                <font style={{ verticalAlign: 'inherit' }}>要么</font>
                                            </font>
                                        </span>
                                    </div>
                                </div>
                            </header>
                            <div className="contact-information">
                                <div className="section_header">
                                    <div className="section_title" >联系信息</div>
                                    <div className="flex_item">
                                        <span className="item_one">已经有账户?</span>
                                        <span className="item_login" onClick={this.goLoginM.bind(this)}>登录</span>
                                    </div>
                                </div>
                                <div className="input-wrapper">
                                    <input placeholder="电子邮件" className="input_wrapper" />
                                </div>
                                <div className="checkbox-wrapper">
                                    <input className="input-checkbox" type="checkbox" />
                                    <a href="#">
                                        <span className="checkbox_label">让我随时了解新闻和独家优惠</span>
                                    </a>
                                </div>
                            </div>
                            <div className="shopping-address">
                                <div className="section_header">
                                    <div className="section_title">送货地址</div>
                                </div>
                            </div>
                            <div className="field_input">
                                <input placeholder="名字" className="field_input_wrapper" style={{ marginRight: '11px' }} />
                                <input placeholder="姓" className="field_input_wrapper field_wrapper" />
                            </div>
                            <div className="field_input">
                                <input placeholder="完整地址" className="input_wrapper" />
                            </div>
                            <div className="field_input">
                                <input placeholder="公寓，套房等" className="input_wrapper" />
                            </div>
                            <div className="field_input">
                                <input placeholder="市" className="input_wrapper" />
                            </div>
                            <div className="field-third">
                                <div className="field_input-wrapper">
                                    <label className="field-label" >
                                        <font style={{ verticalAlign: 'inherit' }}>
                                            <font style={{ verticalAlign: 'inherit' }}>国家/地区</font>
                                        </font>
                                    </label>
                                    <select className="select-field-input" placeholder="国家/地区">
                                        <option data-code="US" value="United States">
                                            中国
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div className="field-third">
                                <div className="field_input-wrapper">
                                    <label className="field-label" >
                                        <font style={{ verticalAlign: 'inherit' }}>
                                            <font style={{ verticalAlign: 'inherit' }}>省</font>
                                        </font>
                                    </label>
                                    <select className="select-field-input" placeholder="省">
                                        <option data-code="US" value="United States">
                                            湖北省
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div className="field_input">
                                <input placeholder="邮政编码" className="input_wrapper" style={{ width: '170px' }} />
                            </div>
                            <div className="field_input">
                                <input placeholder="电话" className="input_wrapper" style={{ marginBottom: '15px' }} />
                            </div>
                            <div className="checkbox-wrapper">
                                <input className="input-checkbox" type="checkbox" />
                                <a href="#">
                                    <span className="checkbox_label">下次保存此信息</span>
                                </a>
                            </div>
                            <div className="step__footer" data-step-footer="">
                                <button type="submit" className="step__footer__continue-btn btn"
                                onClick={this.goPayM.bind(this)}
                                >
                                    <span className="" data-continue-button-content="true">
                                        <font style={{ verticalAlign: 'inherit' }}>
                                            <font style={{ verticalAlign: 'inherit' }}>继续运送</font>
                                        </font>
                                    </span>
                                </button>
                            </div>
                            <footer className="main__footer" role="contentinfo">
                                <p className="copyright-text ">
                                    <font style={{ verticalAlign: 'inherit' }}>
                                        <font style={{ verticalAlign: 'inherit' }}>版权所有ourlifemarket</font>
                                    </font>
                                </p>
                            </footer>
                        </div>
                        <div className="main-item-right">
                            <div className="sidebar_content">
                                <div className="product-list">
                                    <div className="product-table">
                                        <span className="product_image">
                                            <div className="product-thumbnail">
                                                <img src={Img_2} alt="" />
                                            </div>
                                            <span className="product-thumbnail__quantity">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>1个</font>
                                                </font>
                                            </span>
                                        </span>
                                        <span className="product_description">
                                            <div className="product_description_name">IT卫衣3D印花连帽外套</div>
                                            <div className="product_description_variant">小号</div>
                                        </span>
                                        <span className="product_price">$ 45.99</span>
                                    </div>
                                </div>
                                <div className="total-lines">
                                    <div className="total-line-one">
                                        <span className="line-subtotal">
                                            <span className="total-line_name">小计</span>
                                            <span className="total-line_price">$ 45.99</span>
                                        </span>
                                    </div>
                                    <div className="total-line-two">
                                        <span className="line-subtotal">
                                            <span className="total-line_name">运输</span>
                                            <span className="total-line_price" style={{color: '#717171'}}>下一步计算</span>
                                        </span>
                                    </div>
                                    <div className="total-line-three">
                                        <span className="line-subtotal">
                                            <span className="total_name">总</span>
                                            <span className="total_price">$ 45.99</span>
                                            <span className="lines">美元</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}